{{ define "panel" }}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>410宿舍管理面板</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .row:after {
            content: "";
            clear: both;
            display: block;
        }
        [class*="col-"] {
            float: left;
            padding: 15px;
        }
        html {
            font-family: "Lucida Sans", sans-serif;
        }
        .header {
            background-color: #9933cc;
            color: #ffffff;
            padding: 15px;
        }
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color :#33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .online {
            background-color: #5cb85c!important;
        }
        .offline {
            background-color: #ce8483!important;
        }
        .screen {
            background-color: white;
            color: rgba(0,0,0,0.8);
            width: 80%;
            margin: 2% auto;
            border-radius: 5px;
        }
        .menu li:hover {
            background-color: #0099cc;
        }
        .setting-item {
            height: 30px;
            line-height: 30px;
            margin: 15px;
            display: flex; /* 使用 Flexbox */
            align-items: center; /* 垂直居中对齐 */
            justify-content: center; /* 水平居中 */
        }
        .setting-item * {
            white-space:nowrap;
            outline: none; /* 去除下拉框在获得焦点时的边框 */
            border-radius: 4px; /* 设置圆角 */
            border: none; /* 去除边框 */
            display: inline-block;
            height: 100%;
        }
        .setting-btn {
            background-color: #9955dd;
            width: 20%;
            margin: 0 3px;
            font-size: 30px;
            border-radius: 4px;
        }
        .power-btn:active, .setting-btn:active, .common-btn:active,.del-btn:active {
            box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        .power-btn {
            background-color: #9955dd;
            width: 65%;
            margin: 0 3px;
            font-size: 20px;
            vertical-align: middle;
            border-radius: 4px;
        }
        .common-btn {
            background-color: #9955dd;
            width: 55%;
            margin: 0 3px;
            font-size: 20px;
            vertical-align: middle;
            border-radius: 4px;
        }
        .setting-btn, .power-btn, .common-btn, .del-btn {
            user-select: none; /* 对现代浏览器有效 */
            -webkit-user-select: none; /* 对 Safari 有效 */
            -moz-user-select: none; /* 对 Firefox 有效 */
            -ms-user-select: none; /* 对 IE 和 Edge 有效 */
        }
        .ctrl {
            background-color: #33b5e5;
            padding: 5px 15px 15px;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        select {
            color: #333333;
            background-color: #b2dba1; /* 设置背景颜色 */
            padding: 0 10px; /* 添加内边距，提升可用性 */
            font-size: 16px; /* 设置字体大小 */
            appearance: none; /* 去除默认样式，观察效果 */
            -webkit-appearance: none; /* Safari 浏览器 */
            -moz-appearance: none; /* Firefox 浏览器 */
            cursor: pointer; /* 显示点击指针 */
            margin-right: 1px;
        }
        .input-time {
            border-radius: 4px; /* 设置圆角 */
            width: 24%;
        }
        .del-btn {
            width: 25%;
            color: #ffffff;
            background-color: #d9534f; /* 设置背景颜色 */
            padding: 0 5px; /* 添加内边距，提升可用性 */
            font-size: 16px; /* 设置字体大小 */
            margin-left: 1px;
        }
        #time-settings {
            display: none;
        }
        .footer {
            background-color: #0099cc;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            padding: 15px;
        }
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}

        @media only screen and (max-width: 768px) {
            /* For mobile phones: */
            [class*="col-"] {
                width: 100%;
            }
            .ctrl {
                width: 60%;
                margin: 0 auto;
            }
            .menu {
                padding-bottom: 0;
            }
            .info {
                padding-top: 0;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>410宿舍管理面板</h1>
</div>

<div class="row">

    <div class="col-3 menu">
        <ul id="model-status">
            <li >温控模块 - 在线</li>
            <li >门禁模块 - 离线</li>
        </ul>
    </div>

    <div class="col-6 info">
        <h2>信息面板</h2>
        <p>宿舍温度：{{ .Temperature }}℃</p>
        <p>宿舍湿度：{{ .Humidity }}%</p>
        <small> --更新于{{ .Time }}</small>

    </div>
    <div class="col-3">
        <div id="air-settings" class="ctrl">
            <h1>空调设定</h1>
            <div class="screen">
                <p id="PSet">电源设定: {{ .SetAirPower }}</p>
                <p id="TSet">温度设定：{{ .SetTemperature }}℃</p>
                <p id="FSet">风速设定：{{ .SetFanSpeed }}</p>
                <p id="TimeSet">定时开关：未生效</p>
            </div>
            <div class="setting-item">
                <div id="pwr" class="power-btn">电源</div>
            </div>
            <div class="setting-item">
                <div id="t-minus" class="setting-btn">－</div><div style="font-size: 20px;">温度</div><div id="t-plus" class="setting-btn">＋</div>
            </div>
            <div class="setting-item">
                <div id="f-minus" class="setting-btn">－</div><div style="font-size: 20px;">风力</div><div id="f-plus" class="setting-btn">＋</div>
            </div>
            <div class="setting-item">
                <div id="time-set" class="power-btn">定时设置</div>
            </div>
        </div>
        <div id="time-settings" class="ctrl">
            <h1>空调定时设定</h1>
            <div style="font-size: 10px;margin-top: -15px;">ps: 设置每一天的几点几分开/关空调</div>
            <div id="time-setting-demo" style="display: none" class="setting-item time-setting-item">
                <select name="on-or-off">
                    <option value="on" selected>定时开</option>
                    <option value="off">定时关</option>
                </select>
                <input class="input-time" type="number" min="0" max="23" placeholder="时" id="hours">
                <div style="font-size: 20px;">:</div>
                <input class="input-time" type="number" min="0" max="59" placeholder="分" id="minutes">
                <div class="del-btn">删除</div>
            </div>
            <div id="time-set-add-parent" class="setting-item">
                <div id="time-set-add" class="common-btn" style="background-color: chocolate">添加定时</div>
            </div>
            <div class="setting-item">
                <div id="time-set-valid" class="common-btn">不用定时</div>
                <div id="time-set-back" class="common-btn">返回</div>
            </div>
        </div>
    </div>

</div>

<div class="footer">
    <p>你好.</p>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    let lastClickTime = 0;
    let airModelOnline = {{ .AirOnline }};
    let powerSet = {{ .SetAirPower }} == "已关机" ? 0 : 1;
    let tempSet = {{ .SetTemperature }};
    let fanSet = {{ .SetFanSpeed }};
    let timerOn = {{ .TimerOn }} == 1 ? "已生效" : "未生效";
    let timerJson = {{ .TimerJson }};
    function showModelOnlineStatus() {
        let text = airModelOnline ? "在线" : "离线";
        let colorClass = airModelOnline ? "online" : "offline";
        $("#model-status").children().eq(0).html("温控模块 - "+text);
        $("#model-status").children().eq(0).addClass(colorClass);
        $("#model-status").children().eq(1).html("门禁模块 - 离线");
        $("#model-status").children().eq(1).addClass("offline");
    }
    function uploadAirStatus() {
        $.get("/aircon/set",{
            t:tempSet,f:fanSet,p:powerSet
        },function (data,status) {
            console.log(status);
        });
    }
    function updateAirSetShowStatus() {
        $("#TSet").html("温度设定："+tempSet+"℃")
        $("#PSet").html("电源设定: "+(powerSet === 0 ? "已关机" : "已开机"));
        $("#FSet").html("风力设定："+(fanSet === 0 ? "自动" : fanSet+"级"));
        $("#TimeSet").html("定时开关："+timerOn);
    }
    function initAirTimerSettingUI() {
        // 解析 JSON 字符串
        let timerData = JSON.parse(timerJson);
        for (let i = 0; i < timerData.ons.length; i++) {
            let timeString = timerData.ons[i];
            // 使用 split 分隔字符串
            let parts = timeString.split(':');
            AddTimeSettingItemWithArguments("on",parts[0],parts[1]);
        }
        for (let i = 0; i < timerData.offs.length; i++) {
            let timeString = timerData.offs[i];
            // 使用 split 分隔字符串
            let parts = timeString.split(':');
            AddTimeSettingItemWithArguments("off",parts[0],parts[1]);
        }
        $("#time-set-valid").html(timerOn == "已生效" ? "已启用定时" : "不用定时");
    }
    function DelayToUpload() {
        lastClickTime = Date.now()
        setTimeout(function (){
            if (Date.now() > lastClickTime + 900) {
                uploadAirStatus();
            }
        },1000);
    }
    function AddTimeSettingItem() {
        var originCol = $('#time-setting-demo');
        var newCol = originCol.clone(true,true);
        newCol.removeAttr("id");
        newCol.css("display","flex");
        newCol.insertBefore('#time-set-add-parent');
    }
    function AddTimeSettingItemWithArguments(on_off,hour,minute) {
        var originCol = $('#time-setting-demo');
        var newCol = originCol.clone(true,true);
        newCol.removeAttr("id");
        newCol.css("display","flex");
        newCol.children().eq(0).val(on_off);
        newCol.children().eq(1).val(hour);
        newCol.children().eq(3).val(minute);
        newCol.insertBefore('#time-set-add-parent');
    }
    $(function(){
        showModelOnlineStatus();
        updateAirSetShowStatus();
        initAirTimerSettingUI();
        $("#t-minus").click(function (){
            if (tempSet <= 16) return;
            tempSet -= 1;
            updateAirSetShowStatus();
            DelayToUpload();
        });
        $("#t-plus").click(function (){
            if (tempSet >= 31) return;
            tempSet += 1;
            updateAirSetShowStatus();
            DelayToUpload();
        });
        $("#f-minus").click(function (){
            if (fanSet <= 0) return;
            fanSet -= 1;
            updateAirSetShowStatus();
            DelayToUpload();
        });
        $("#f-plus").click(function (){
            if (fanSet >= 5) return;
            fanSet += 1;
            updateAirSetShowStatus();
            DelayToUpload();
        });
        $("#pwr").click(function (){
            powerSet ^= 1;
            updateAirSetShowStatus();
            DelayToUpload();
        });
        $("#time-set").click(function (){
            $("#air-settings").css("display","none");
            $("#time-settings").css("display","block");
        });
        $("#time-set-back").click(function (){
            $("#time-settings").css("display","none");
            $("#air-settings").css("display","block");
        });
        $("#time-set-add").click(function (){
            AddTimeSettingItem();
        });
        $(".del-btn").click(function (){
            $(this).parent().remove();
        });
        $("#time-set-valid").click(function (){
            if ($(this).html() === "不用定时") {
                let dataOk = true;
                let onList = [];
                let offList = [];
                $(".time-setting-item[id!='time-setting-demo']").each(function (){
                    let on_off = $(this).children().eq(0).val();
                    let hour = $(this).children().eq(1).val();
                    let minute = $(this).children().eq(3).val();
                    console.log(hour);
                    if (hour<0 || hour>23 || hour == "") {
                        alert("小时必须为0-23的整数");
                        dataOk = false;
                        return;
                    }
                    if (minute<0 || minute>59 || minute == "") {
                        alert("分钟必须为0-59的整数");
                        dataOk = false;
                        return;
                    }
                    if (on_off === "on") {
                        onList.push(hour+":"+minute);
                    } else {
                        offList.push(hour+":"+minute);
                    }
                });
                if (!dataOk)
                    return;
                if (onList.length===0 && offList.length===0) {
                    alert("请添加定时项");
                    return;
                }
                let data = JSON.stringify({"timer-on":1,"ons":onList,"offs":offList});
                $.ajax({
                    url: '/aircon/timer/set', // 后端接口地址
                    type: 'POST',
                    contentType: 'application/json',
                    data: data,
                    success: function(response) {
                        console.log('成功:', response);
                    },
                    error: function(xhr, status, error) {
                        console.error('错误:', error);
                    }
                });
                $(this).html("已启用定时");
                timerOn = "已生效";
                updateAirSetShowStatus();
            } else {
                let data = JSON.stringify({"timer-on":0});
                $.ajax({
                    url: '/aircon/timer/set', // 后端接口地址
                    type: 'POST',
                    contentType: 'application/json',
                    data: data,
                    success: function(response) {
                        console.log('成功:', response);
                    },
                    error: function(xhr, status, error) {
                        console.error('错误:', error);
                    }
                });
                $(this).html("不用定时");
                timerOn = "未生效";
                updateAirSetShowStatus();
            }

        });
    });
</script>
</body>
</html>
{{ end }}